<div class="layui-form-item">
    <label class="layui-form-label">音效名称</label>
    <div class="layui-input-inline" style="width:300px;">
        <input type="text" name="music_type_name" value="<?=$music_type['test_music_type_name']?>" placeholder="请输入音效名称" class="layui-input music_type_name">
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label">选中图标</label>
    <div class="layui-input-block">
        <button type="button" class="layui-btn" id="test1">
            <i class="layui-icon">&#xe67c;</i>上传图标
        </button>
        <input type="text" name="" class="wenzi1" style="width:400px;height:35px;margin-left:20px;display:none;">
        <span class="up1" style="width:300px;height:35px;margin-left:20px;display:none;color:red;"></span>
        <input type="hidden" value="<?=$music_type['test_music_type_icon']?>" class="icon1">
        <br><br>
        <div style="border:1px solid gainsboro;width:100px;height: 100px;">
            <img src="<?=$music_type['test_music_type_icon']?>" class="test1" style="height:100px;width:100px;">
        </div>
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">未选中图标</label>
    <div class="layui-input-block">
        <button type="button" class="layui-btn" id="test2">
            <i class="layui-icon">&#xe67c;</i>上传图标
        </button>
        <input type="text" name="" class="wenzi2" style="width:400px;height:35px;margin-left:20px;display:none;">
        <span class="up2" style="width:300px;height:35px;margin-left:20px;display:none;color:red;"></span>
        <input type="hidden" value="<?=$music_type['test_no_music_type_icon']?>" class="icon2">
        <br><br>
        <div style="border:1px solid gainsboro;width:100px;height: 100px;">
            <img src="<?=$music_type['test_no_music_type_icon']?>" class="test2" style="height:100px;width:100px;">
        </div>
    </div>
</div>

<br><br>
<table class="layui-table table">
    <colgroup>
        <col width="15%">
        <col width="30%">
        <col width="5%">
        <col width="5%">
        <col width="5%">
        <col width="20%">
    </colgroup>
    <thead>
    <tr>
        <th>名称</th>
        <th>音频</th>
        <th>时长</th>
        <th>状态</th>
        <th>使用次数</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody class="body">
    <?php if(!empty($music)){
        foreach($music as $k=>$v){
            $length=count($music);//统计这个数组有多少个
            ?>

            <tr>
                <td>
                    名称<?=$k+1;?>:
                    <input type="text" name="" value="<?=$v['music_name']?>" class="music_name<?=$k?>">
                </td>
                <td>
                    <button type="button" class="layui-btn layui-btn-xs" style="margin-bottom:10px;" id="tt<?=$k?>"> <i class="layui-icon">&#xe67c;</i>上传音频 </button>
                    <div style="width:70%;height:80px;border:1px solid lightgray;">
                        <audio  controls="controls" src="<?=$v['music_url']?>" style="width:100%;height:100%;" class="aa<?=$k?>" id="aa<?=$k?>"></audio>
                        <input type="hidden" value="<?=$v['music_url']?>" class="aaa<?=$k?>">
                        <input type="hidden" value="<?=$v['music_url']?>" class="old<?=$k?>">
                    </div>
                </td>
                <td><?=$v['music_time']?></td>
                <?php if($v['music_status']==1){ ?>
                    <td>已下线</td>
                <?php }else if($v['music_status']==2){ ?>
                    <td>已上线</td>
                <?php } ?>
                <td><?=$v['use_num']?></td>
                <td>
                    <button class="layui-btn layui-btn-xs saves<?=$k?>">保存</button>
                    <?php if($v['music_status']==1){ ?>
                        <button class="layui-btn layui-btn-xs layui-btn-normal st1<?=$k?>">启用</button>
                    <?php }else if($v['music_status']==2){ ?>
                        <button class="layui-btn layui-btn-xs layui-btn-danger st2<?=$k?>">停用</button>
                    <?php } ?>
                    <button class="layui-btn layui-btn-xs layui-btn-warm uu1<?=$k?>">上移</button>
                    <button class="layui-btn layui-btn-xs layui-btn-warm dd1<?=$k?>">下移</button>
                    <input type="hidden" value="<?=$v['id']?>" class="music_id<?=$k?>">
                </td>
            </tr>
            <?php if($k==0){ ?>
                <input type="hidden" name="" value="<?=$music[0]['id']?>" class="start1<?=$k;?>">
            <?php }else{ ?>
                <input type="hidden" name="" value="<?=$music[$k-1]['id']?>" class="start1<?=$k;?>">
            <?php } ?>
            <?php if($k==$length-1){ ?>
                <input type="hidden" name="" value="<?=$music[$length-1]['id']?>" class="end1<?=$k;?>">
            <?php }else{ ?>
                <input type="hidden" name="" value="<?=$music[$k+1]['id']?>" class="end1<?=$k;?>">
            <?php } ?>
        <?php }} ?>
    </tbody>
</table>

<br><br>

<div class="layui-form-item">
    <label class="layui-form-label"></label>
    <div class="layui-input-block">
        <button class="layui-btn add_">新增素材</button>
        <button class="layui-btn save">保存</button>
        <button class="layui-btn back">返回</button>
        <input type="hidden" value="<?=$music_type['id']?>" class="ids">
    </div>
</div>
<script>
    //音效分类保存
    $('.save').click(function(){
        var music_type_name=$('.music_type_name').val();
        var icon1=$('.icon1').val();
        var icon2=$('.icon2').val();
        var id=$('.ids').val();
        $.ajax({
            type: "post",
            data: {music_type_name:music_type_name,music_type_icon:icon1,music_no_type_icon:icon2,id:id},
            dataType: "json",
            url: "<?=base_url("no_edit/music/save_edit")?>",
            success: function (res) {
                if(res.code==0){
                    layer.msg(res.msg, {time: 2000},function(){
//                        window.location.reload()
                        window.location.href=res.data
                    });
                }else{
                    layer.msg(res.msg, {time: 2000});
                }
            }
        })
    })

    //新增音效素材，上传音效，保存新增音效
    $('.add_').click(function(){
        if($(".add_tr").length > 0) {
            layer.msg("请先保存当前新增素材",{time:2000});
            return false;
        }
        var html="";
        html+="<tr class=\"add_tr\">";
        html+="<td>名称" +
            "<input type=\"text\" name='' value=\"\" class=\"music_name\" style=\"width:210px;\">" +
            "</td>";
        html+="<td><button type=\"button\" class=\"layui-btn layui-btn-xs\" style=\"margin-bottom:10px;\" id=\"upload1\"> <i class=\"layui-icon\">&#xe67c;</i>上传音频 </button>" +
            "<div style=\"width:300px;height:80px;border:1px solid lightgray;\"><audio  controls=\"controls\" src=\"\" style=\"width:100%;height:100%;\" class=\"audio\" id=\"audio\"></audio></div>" +
            "<input type=\"hidden\" name='' value=\"\" class=\"audio_url\">" +
            "</td>";
        html+="<td><button type=\"button\" class=\"layui-btn layui-btn-xs add_music\" style=\"margin-bottom:10px;\">保存</button></td>";
        html+="</tr>";
        $('.body').append(html)
        //上传音频
        layui.use('upload', function() {
            var upload = layui.upload;
            var uploadInst = upload.render({
                elem: '#upload1' //绑定元素
                , url: "<?=base_url("common/upload/normal_upload")?>" //上传接口
                , data: {type: "audio"}
                ,size:"5120"
//                , accept: 'file'
                , accept: 'audio'
                , acceptMime: 'audio/mp3'
                , done: function (res) {
                    if (res.code == 0) {
                        $('.audio_url').val(res.data.file_url);
                        $('.audio').attr("src", res.data.file_url);
                        layer.msg(res.msg, {time: 2000});
                    } else {
                        layer.msg(res.msg, {time: 2000});
                    }
                }
            });
        })
        //保存音效
        $(".add_music").click(function(){
            var music_type_id=$('.ids').val()
            var music_name=$('.music_name').val()
            var music_url=$('.audio_url').val()
            $.ajax({
                type: "post",
                data: {music_type_id:music_type_id,music_name:music_name,music_url:music_url},
                dataType: "json",
                url: "<?=base_url("no_edit/music/music_add")?>",
                success: function (res) {
                    if(res.code==0){
                        layer.msg(res.msg, {time: 2000},function(){
                            window.location.reload()
                        });
                    }else{
                        layer.msg(res.msg, {time: 2000});
                    }
                }
            })
        })
    })

    //返回
    $(".back").click(function(){
        history.go(-1)
    })
    $(function(){
        //定义一个50的jquery数组
        var arr=[];
        for(var i=0;i<51;i++){
            arr.push(i)
        }
        $.each(arr,function(i,n){
            //保存
            $(".saves"+n).click(function(){
                var music_name=$(".music_name"+n).val();
                var music_url=$(".aaa"+n).val();
                var old_music_url=$(".old"+n).val();
                var music_id=$(".music_id"+n).val();
//                var a=[music_name,music_url,old_music_url,music_id]
                $.ajax({
                    type: "post",
                    data: {music_name:music_name,music_url:music_url,old_music_url:old_music_url,music_id:music_id},
                    dataType: "json",
                    url: "<?=base_url("no_edit/music/save_edit_music")?>",
                    success: function (res) {
                        if(res.code==0){
                            layer.msg(res.msg, {time: 2000},function(){
                                window.location.reload()
                            });
                        }else{
                            layer.msg(res.msg, {time: 2000});
                        }
                    }
                })
            })
            //启用
            $(".st1"+n).click(function(){
                var music_id=$(".music_id"+n).val();
//                var a=[music_name,music_url,old_music_url,music_id]
                $.ajax({
                    type: "post",
                    data: {music_id:music_id},
                    dataType: "json",
                    url: "<?=base_url("no_edit/music/start_music")?>",
                    success: function (res) {
                        if(res.code==0){
                            layer.msg(res.msg, {time: 2000},function(){
                                window.location.reload()
                            });
                        }else{
                            layer.msg(res.msg, {time: 2000});
                        }
                    }
                })
            })
            //停用
            $(".st2"+n).click(function(){
                var music_id=$(".music_id"+n).val();
//                var a=[music_name,music_url,old_music_url,music_id]
                $.ajax({
                    type: "post",
                    data: {music_id:music_id},
                    dataType: "json",
                    url: "<?=base_url("no_edit/music/stop_music")?>",
                    success: function (res) {
                        if(res.code==0){
                            layer.msg(res.msg, {time: 2000},function(){
                                window.location.reload()
                            });
                        }else{
                            layer.msg(res.msg, {time: 2000});
                        }
                    }
                })
            })
            //上移
            $(".uu1"+n).click(function(){
                var start_id=$('.start1'+n).val()
                var music_id=$(".music_id"+n).val();
                if(start_id==music_id){
                    layer.msg("当前已为第一个")
                    return false;
                }else{
                    $.ajax({
                        type: "post",
                        data: {music_id:music_id,start_id:start_id},
                        dataType: "json",
                        url: "<?=base_url("no_edit/music/up_music")?>",
                        success: function (res) {
                            if(res.code==0){
                                layer.msg(res.msg, {time: 2000},function(){
                                    window.location.reload()
                                });
                            }else{
                                layer.msg(res.msg, {time: 2000});
                            }
                        }
                    })
                }
            })
            //下移
            $(".dd1"+n).click(function(){
                var end_id=$('.end1'+n).val()
                var music_id=$(".music_id"+n).val();
                if(end_id==music_id){
                    layer.msg("当前已为最后一个")
                    return false;
                }else{
                    $.ajax({
                        type: "post",
                        data: {music_id:music_id,end_id:end_id},
                        dataType: "json",
                        url: "<?=base_url("no_edit/music/down_music")?>",
                        success: function (res) {
                            if(res.code==0){
                                layer.msg(res.msg, {time: 2000},function(){
                                    window.location.reload()
                                });
                            }else{
                                layer.msg(res.msg, {time: 2000});
                            }
                        }
                    })
                }
            })


            //重新上传音效
            layui.use('upload', function(){
                var upload = layui.upload;
                var t=$("#tt"+n);
                //上传分类图标
                var uploadInst = upload.render({
                    elem: t //绑定元素
                    ,url: "<?=base_url("common/upload/normal_upload")?>" //上传接口
                    , data: {type: "audio"}
                    ,size:"5120"
//                    , accept: 'file'
                    , accept: 'audio'
                    , acceptMime: 'audio/mp3'
                    , done: function (res) {
                        if (res.code == 0) {
                            $('.aaa'+n).val(res.data.file_url);
                            $('.aa'+n).attr("src",res.data.file_url);
                            layer.msg(res.msg, {time: 2000});
                        }else{
                            layer.msg(res.msg, {time: 2000});
                        }
                    }
                });

            });
        })

        //音效分类重新上传图片
        layui.use('upload', function(){
            var upload = layui.upload;

            //上传选中图标
            var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                ,url: "<?=base_url("common/upload/normal_upload")?>" //上传接口
                , data: {type: "image"}
//                ,acceptMime: 'image/*
                ,size:"1024"
                , before: function () {
                    $(".up1").text("上传中。。。请等待");
                    $(".up1").show()
                }
                , done: function (res) {
                    if (res.code == 0) {
                        $('.up1').hide();
                        $('.icon1').val(res.data.file_url);
                        $('.wenzi1').val(res.data.file_url);
                        $('.wenzi1').show();
                        $('.test1').attr("src",res.data.file_url);
                        layer.msg(res.msg, {time: 2000});
                    }else{
                        layer.msg(res.msg, {time: 2000});
                    }
                }
            });

            //上传未选中图标
            var uploadInst = upload.render({
                elem: '#test2' //绑定元素
                ,url: "<?=base_url("common/upload/normal_upload")?>" //上传接口
                , data: {type: "image"}
//                ,acceptMime: 'image/*'
                ,size:"1024"
                , before: function () {
                    $(".up2").text("上传中。。。请等待");
                    $(".up2").show()
                }
                , done: function (res) {
                    if (res.code == 0) {
                        $('.up2').hide();
                        $('.icon2').val(res.data.file_url);
                        $('.wenzi2').val(res.data.file_url);
                        $('.wenzi2').show();
                        $('.test2').attr("src",res.data.file_url);
                        layer.msg(res.msg, {time: 2000});
                    }else{
                        layer.msg(res.msg, {time: 2000});
                    }
                }
            });

        });
    })
</script>